<template>
  <div class='list'>
    <div class="list-titlebox flex-r">
      <div class="list-title">{{title}}</div>
      <el-popover
        placement="bottom"
        width="160"
        v-model="typePopup">
        <type-nav @changeType="changeType"></type-nav>
        <span class="list-title-type" slot="reference">游戏分类<template v-if="typeTitle">（{{typeTitle}}）</template></span>
      </el-popover>
    </div>
    <div class="list-contentbox bg-grey">
      <el-row class="list-contentrow flex-r-center" v-for="(item) in listData" :key="item.id">
        <el-col :xs="20" :sm="18" :md="16" :lg="14" :xl="12">
          <div class="list-content ">
              <div class="list-content-logo">
                <img :src="item.logo" alt=" ">
              </div>
              <div class="list-content-main">
                <p class="list-content-main-title">{{item.title}}</p>
                <div class="list-content-main-intro flex-r">
                  <i class="el-icon-tickets">分类：<span>{{item.category}}</span></i>
                  <i class="el-icon-document">类型：<span>{{item.type}}</span></i>
                  <i class="el-icon-date">发布时间：<span>{{item.date}}</span></i>
                </div>
                <div class="list-content-main-info" v-html="item.info"/>
                <my-button>123</my-button>
              </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import myButton from '~/components/common/MyButton'
import typeNav from '~/components/list/nav'
import list from '~/components/list/list'
import { list1 } from '~/static/data/list'
export default {
  data () {
    return {
      typePopup: false,
      typeTitle: '',
      listData: list1
    }
  },
  props: ['title'],
  components: {
    typeNav,
    list,
    myButton
  },
  methods: {
    changeType (data) {
      this.typePopup = false
      this.typeTitle = data.chooseData.title
    }
  },
  created () {
    this.name = this.$route.name.split('-')[1]
  }
}
</script>

<style lang='scss' scoped>
.list {
  &-titlebox {
    position: relative;
    margin: 40px;
    padding: 0 100px 0 20px;
  }
  &-contentbox {
    padding: 50px 10px;
  }
  &-contentrow {
    margin-top:40px;
    &:first-child {
      margin-top:0
    }
  }
  &-title {
    font-size: 40px;
    color: #e91e63;
    margin: 0 auto;
    text-align: center;
    font-weight: bold;
    &-type {
      font-size:14px;
      padding: 5px 10px;
      color:#333;
      border:1px solid #333;
      &:hover {
        cursor: pointer;
        border-color:#e91e63;
        background: #e91e63;
        color: #fff;
      }
    }
  }
  &-content {
    display: flex;

    @media screen and (max-width: 500px) {
      flex-wrap: wrap;
    }
    &-logo {
      margin-right:5%;
      flex:1;
      @media screen and (max-width: 500px) {
        flex:auto;
        width:100%;
        margin-right:0;
        margin-bottom:10px
      }
      img {
        margin:0 auto;
        width: 100%
      }
    }
    &-main {
      flex:2;
      &-title {
        font-size:30px;
      }
      &-intro {
        @media screen and (max-width: 500px) {
          flex-wrap: wrap;
        }
        border:1px solid #ddd;
        margin:10px 0;
        i {
          padding: 10px 5px;
          color:#777
        }
      }
    }
  }
}
</style>

